<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Giao diện trang chính</title>
        <link rel="stylesheet" type="text/css" href="css/css.css" media="all">
        <script src="JS/jquery_1_10_1_min.js" type="text/javascript"></script>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type='text/javascript'>
            $(document).ready(function(){
                $('a.tab').click(function(){
                    $('.active').removeClass('active');
                    $(this).addClass('active');
                    $('.showtab').slideUp();
                    var tab_show = $(this).attr('title');
                    $('#'+ tab_show).slideDown();
                });
            });
        </script>
    </head>
    <body>
        <div id='main'>
        <div id='main-header'>
            header
        </div><!-- End header -->
        <div id='main-body'>
            <div id='main-left'>
                <div id='ml-head'>
                    <div id='ml-banner'>Danh sách người dùng</div>                    
                    <div id='ml-online'>
                        <a href='#' title='user-online' class='tab'>12</a>
                </div>
                    <div id='ml-number'>
                        <a href='#' title='user-list' class='active tab'>20</a>
                    </div>
                </div>
                <div id='ml-body'>
                    <div id='user-list' class='showtab'>
                    <ul class='list-online'>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                    </ul>
                    </div>
                    <div id='user-online' class='showtab'>
                    <ul class='list-online'>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                    </ul>
                    </div>
                </div>
            </div><!-- End Main Left bar -->
            <div id='main-center'>
                <div id='chat-list'>
                    <ul>
                        <li>
                            <div class='chat-info'>
                            <div class='c-user-img'><img src='Images/users.png' alt='user-icon' width='50' height='50'/></div>
                            <div class='c-user-name'>Harem</div>
                            <div class='c-time'>12:20:30 Monday</div>
                            </div>
                            <p class='c-text'>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
                        </li>
                        <li>
                            <div class='chat-info'>
                            <div class='c-user-img'><img src='Images/users.png' alt='user-icon' width='50' height='50'/></div>
                            <div class='c-user-name'>Harem</div>
                            <div class='c-time'>12:20:30 Monday</div>
                            </div>
                            <p class='c-text'>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
                        </li>
                    </ul>
                </div>
                <form action='' method='post'>
                    <div id='frm-chat'>
                        <input type='text' name='chattext' value='' size='60' class='text-chat'>
                    </div>
                    <div id='submit-chat'>
                        <input type='submit' name='submit' value='Chat' id='submit-chat-button'>
                    </div>
                </form>
            </div>
            <div id='main-right'>right bar</div>
        </div>
        <div id='main-bottom'>bottom</div>
        </div>
    </body>
</html>
